<!-- ERC-设备巡检-巡检计划 -->

<template>
  <div>
    <div v-show="isMain" class="inspect-wrap-common">
      <px-form ref="tableForm" class="custom-form-ui inspect-form" :model="queryParams" label-position="right" label-width="120px">
        <px-row :gutter="16">
          <px-col :span="6">
            <px-form-item label="计划名称">
              <px-input
                v-model="queryParams.planName"
                placeholder="请输入巡检计划名称/编号"
                maxlength="50"
                clearable
                @blur="queryParams.planName = $event.target.value.trim()"
                @keyup.enter="queryTable"
              >
                <template #suffix>
                  <px-icon style="cursor: pointer" @click="queryTable">
                    <search />
                  </px-icon>
                </template>
              </px-input>
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <FactoryArea :factoryArea="queryParams.factoryAreaCode" @changeFactoryArea="changeFactoryArea" />
          </px-col>
          <px-col :span="6">
            <CheckGroup :checkGroup="queryParams.checkGroupCode" @changeCheckGroup="changeCheckGroup" />
          </px-col>
          <px-col :span="6">
            <PlanStatus :planStatus="queryParams.planStatus" @changePlanStatus="changePlanStatus" />
          </px-col>
        </px-row>
        <px-row :gutter="16">
          <px-col :span="6">
            <PeopleSelect :peopleList="queryParams.createBy" @changePeopleList="changePeopleList" />
          </px-col>
          <px-col :span="6">
            <px-button type="primary" @click="queryTable">查询</px-button>
            <px-button @click="resetTable">重置</px-button>
          </px-col>
        </px-row>
      </px-form>
      <div class="inspect-table-btn">
        <px-button v-has="'ERC_INSPECT_PLAN_ADD'" style="margin-right: 8px" type="primary" @click="handleAdd">新增巡检计划</px-button>
        <!-- <px-button-group class="ml-4">
          <px-button v-has="'ERC_INSPECT_PLAN_DOWN'" type="primary" style="border-right-color: #3b82f6" ghost> 下载模板</px-button>
          <px-button v-has="'ERC_INSPECT_PLAN_IMPORT'" type="primary" ghost>导入</px-button>
        </px-button-group> -->
      </div>
      <px-table :data="tableData" class="inspect-table" size="small" height="calc(100vh - 347px)" border>
        <px-table-column label="序号" min-width="50" align="center" fixed="left">
          <template #default="{ $index }">
            {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
          </template>
        </px-table-column>
        <template v-for="(item, index) in tableColumns" :key="index">
          <px-table-column
            v-if="item.prop === 'planNo'"
            :label="item.label"
            :min-width="item.minWidth"
            :align="item.align"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :fixed="item.fixed"
          >
            <template #default="scope">
              <span v-if="isHasPermission('ERC_INSPECT_PLAN_TABLE_VIEW')" style="color: #3b82f6; cursor: pointer" @click="handleView(scope.row)">{{
                scope.row.planNo
              }}</span>
            </template>
          </px-table-column>
          <px-table-column
            v-else-if="item.prop === 'execStartDate,execEndDate'"
            :label="item.label"
            :min-width="item.minWidth"
            :align="item.align"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :fixed="item.fixed"
          >
            <template #default="scope">{{ dealTime(scope.row["execStartDate"], scope.row["execEndDate"]) }}</template>
          </px-table-column>
          <px-table-column
            v-else-if="item.label === '状态'"
            :label="item.label"
            :align="item.align ? item.align : 'left'"
            :min-width="item.minWidth"
            :fixed="item.fixed"
          >
            <template #default="scope">
              <px-tag class="ml-2" :type="tagArr[scope.row['planStatus']]">{{ scope.row["planStatusDesc"] }}</px-tag>
            </template>
          </px-table-column>
          <px-table-column
            v-else
            :label="item.label"
            :min-width="item.minWidth"
            :align="item.align"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :fixed="item.fixed"
          >
            <template #default="scope">{{
              scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
            }}</template>
          </px-table-column>
        </template>

        <px-table-column fixed="right" label="操作" min-width="150" align="center">
          <template #default="scope">
            <px-tooltip content="详情" placement="top">
              <px-button v-has="'ERC_INSPECT_PLAN_TABLE_VIEW'" link type="primary" icon="Tickets" @click="handleView(scope.row)" />
            </px-tooltip>
            <px-tooltip content="复制" placement="top">
              <px-button v-has="'ERC_INSPECT_PLAN_TABLE_COPY'" link type="primary" icon="CopyDocument" @click="handleCopy(scope.row)" />
            </px-tooltip>
            <!-- 状态为进行中且为循环周期时不能编辑，状态为已完成不能编辑 -->
            <px-tooltip
              v-if="!((scope.row['planStatus'] === 3 && scope.row['execType'] === 1) || scope.row['planStatus'] === 4)"
              content="修改计划"
              placement="top"
            >
              <px-button v-has="'ERC_INSPECT_PLAN_TABLE_EDIT'" link type="primary" icon="EditPen" @click="handleEdit(scope.row)" />
            </px-tooltip>
            <px-tooltip v-if="[1, 2].indexOf(scope.row['planStatus']) !== -1" content="删除" placement="top">
              <px-button v-has="'ERC_INSPECT_PLAN_TABLE_DELETE'" link type="danger" icon="Delete" @click="handleDelete(scope.row)" />
            </px-tooltip>
          </template>
        </px-table-column>
      </px-table>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        class="inspect-table-pagination"
        :total="total"
        @pagination="queryTable"
      />
    </div>
    <AddInspectPlan v-model:is-main="isMain" v-model:is-add="isAdd" v-model:plan-no="planNo" v-model:is-copy="isCopy" />
    <DetailInspectPlan
      v-model:is-main="isMain"
      v-model:is-add="isAdd"
      v-model:isUpdate="isUpdate"
      v-model:plan-no="planNo"
      v-model:is-detail="isDetail"
    />
    <ExecutionCycleDialog v-model:visible="isUpdate" v-model:plan-no="planNo" @close="cycleDialogClose" />
  </div>
</template>
<script setup lang="ts">
defineOptions({
  name: "ALL_EQUIP_INSPECT_PLAN"
});
import { deleteInspectPlanTable, getInspectPlanTable } from "@/api/erc/inspectPlan";
import { isHasPermission } from "@/utils/auth";
import { PxMessage, PxMessageBox } from "px-ui";
import { onMounted, reactive, ref, toRefs, watch } from "vue";
import { useRoute } from "vue-router";
import { CheckGroup, FactoryArea, PeopleSelect, PlanStatus } from "../components/index";
import { AddInspectPlan, DetailInspectPlan, ExecutionCycleDialog } from "./components/index";
const route = useRoute();
const tagArr = ["", "info", "warning", "", "success"];
const state = reactive<any>({
  isMain: true, // 主页面
  isAdd: false,
  isDetail: false,
  isCopy: false,
  isUpdate: false,
  systemCodeList: [],
  queryParams: {
    planName: "",
    factoryAreaCode: "",
    planStatus: "",
    checkGroup: "",
    createBy: null,
    pageNum: 1,
    pageSize: 20
  },
  total: 0,
  tableColumns: [
    { prop: "planNo", label: "计划编号", minWidth: "140", showOverflowTooltip: true, fixed: "left" },
    { prop: "planName", label: "计划名称", minWidth: "140", showOverflowTooltip: true },
    { prop: "execStartDate,execEndDate", label: "计划执行期", minWidth: "120", showOverflowTooltip: true },
    { prop: "factoryAreaDesc", label: "地块", minWidth: "160", showOverflowTooltip: true },
    { prop: "checkAreaDesc", label: "巡检区域", minWidth: "140", showOverflowTooltip: true },
    { prop: "checkGroupDesc", label: "巡检组", minWidth: "120", showOverflowTooltip: true },
    { prop: "recommendDay", label: "建议工作天数", minWidth: "120", showOverflowTooltip: true },
    { prop: "planStatusDesc", label: "状态", minWidth: "90", showOverflowTooltip: true },
    { prop: "createByName", label: "创建人", minWidth: "140", showOverflowTooltip: true },
    { prop: "createTime", label: "创建时间", minWidth: "120", showOverflowTooltip: true },
    { prop: "updateTime", label: "更新时间", minWidth: "120", showOverflowTooltip: true }
  ],
  tableData: [],
  detailPageType: "add",
  planNo: ""
});
const { isDetail, isMain, isAdd, isCopy, isUpdate, systemCodeList, queryParams, tableColumns, total, tableData, detailPageType, planNo } =
  toRefs(state);
const queryTable = async () => {
  const params = JSON.parse(JSON.stringify(queryParams.value));
  params.systemCodes = systemCodeList.value;
  const data = await getInspectPlanTable(params);
  tableData.value = data?.data;
  total.value = data?.total;
};
// 重置筛选条件和巡检清单
const tableForm = ref();
const resetTable = async () => {
  queryParams.value = {
    planName: "",
    factoryAreaCode: "",
    planStatus: "",
    checkGroupCode: "",
    createBy: null,
    pageNum: 1,
    pageSize: 20
  };
  systemCodeList.value = [];
  if (tableForm.value) tableForm.value.resetFields();
  queryTable();
};
onMounted(() => {
  queryTable();
});
watch(isMain, (newVal, oldVal) => {
  if (newVal && !oldVal) {
    queryTable();
  }
});
function changeFactoryArea(row: any) {
  queryParams.value.factoryAreaCode = row;
}
function changeCheckGroup(row: any) {
  queryParams.value.checkGroupCode = row;
}
function changePlanStatus(row: any) {
  queryParams.value.planStatus = row;
}
function changePeopleList(val) {
  queryParams.value.createBy = val;
}
function handleView(row: any) {
  const { planNo: planNumber } = row;
  planNo.value = planNumber;
  isMain.value = false;
  isDetail.value = true;
}
function handleAdd() {
  isAdd.value = true;
  isMain.value = false;
}
function handleEdit(row: any) {
  console.log(row);
  const { planNo: planNumber, planStatus } = row;
  planNo.value = planNumber;
  if ([1, 2].indexOf(planStatus) !== -1) {
    handleAdd();
  } else {
    isUpdate.value = true;
  }
}
function handleCopy(row: any) {
  const { planNo: planNumber } = row;
  planNo.value = planNumber;
  isCopy.value = true;
  handleAdd();
}
function handleDelete(row: any) {
  const { id, planName } = row;
  PxMessageBox.confirm(`要删除当前巡检计划“${planName}”吗？`, "提示", {
    confirmButtonText: "删除",
    confirmButtonClass: "px-button--danger",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      await deleteInspectPlanTable(id);
      PxMessage.success("删除成功");
      queryTable();
    })
    .catch(() => {});
}
function dealTime(execStartDate, execEndDate) {
  if (execStartDate && execEndDate) {
    return `${execStartDate?.split(" ")[0]}~${execEndDate?.split(" ")[0]}`;
  }
  return "-";
}
function cycleDialogClose() {
  queryTable();
}
</script>

<style lang="scss" scoped>
@import url("../scss/table-list.scss");
</style>
